<template>
  <div>
    <div ref="myChart" :style="{width: '100%', height: '600px'}"></div>

  </div>
</template>
<script>  
export default {
  data() {
    return {
      nodeList: [
        {
          "name": "魏淑芳",
          "value": "BUSINESS_WRITE",
          // 图片
          "symbol": 'image://' + 'https://img0.baidu.com/it/u=3390965785,1769936100&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200',
          // x轴初始点
          "x": "60",
          // y轴初始点
          "y": "-100",
          "symbolSize": [
            82,
            85
          ]
        },
        {
          "name": "wfl",
          "value": "BOND_PAY",
          "symbol": 'image://' + 'https://img1.baidu.com/it/u=2669029182,2940533287&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          "x": "240",
          "y": "-100",
          "symbolSize": [
            82,
            85
          ]
        },
        {
          "name": "齐唯名",
          "value": "BOND_COLLECT",
          "symbol": 'image://' + 'https://img1.baidu.com/it/u=1594886722,3999627376&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=394',
          "x": "0",
          "y": "-20",
          "symbolSize": [
            82,
            85
          ],
          'symbolOffset': [0, '10%']
        },
        {
          "name": "王七七",
          "value": "PROBABILITY_BUDGET",
          "symbol": 'image://' + 'https://img2.baidu.com/it/u=563805421,206276784&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
          "x": "60",
          "y": "-20",
          "symbolSize": [
            82,
            85
          ],
          'symbolOffset': [0, '11%']
        },
        {
          "name": "王一成",
          "value": "BEFORE_CONTRACT_FLOW",
          "symbol": 'image://' + 'https://img0.baidu.com/it/u=987887309,1885285465&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
          "x": "120",
          "y": "-20",
          "symbolSize": [
            82,
            85
          ],
          'symbolOffset': [0, '10%']
        },
        {
          "name": "王二强",
          "value": "BEFORE_CONTRACT_FLOW",
          "symbol": 'image://' + 'https://img1.baidu.com/it/u=2889397483,1418678883&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          "x": "180",
          "y": "-20",
          "symbolSize": [
            82,
            85
          ],
          'symbolOffset': [0, '10%']
        },
        {
          "name": "王三丽",
          "value": "BEFORE_CONTRACT_FLOW",
          "symbol": 'image://' + 'https://img1.baidu.com/it/u=1663377084,1997454788&fm=253&fmt=auto?w=400&h=400',
          "x": "240",
          "y": "-20",
          "symbolSize": [
            82,
            85
          ],
          'symbolOffset': [0, '10%']
        },
        {
          "name": "王四美",
          "value": "BEFORE_CONTRACT_FLOW",
          "symbol": 'image://' + 'https://img2.baidu.com/it/u=1298471112,643482774&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
          "x": "300",
          "y": "-20",
          "symbolSize": [
            82,
            85
          ],
          'symbolOffset': [0, '10%']
        },
        {
          "name": "辅助节点1",
          "x": 300,
          "y": -100,
          "symbolSize": 0,
          "system_name": null,
          "label": {
            "opacity": 0
          }
        },
        // {
        //   "name": "收款",
        //   "value": "COLLECT",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "342",
        //   "y": "160",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "收入算费",
        //   "value": "INCOME_COUNT",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "194",
        //   "y": "160",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "收入出账",
        //   "value": "INCOME_OUT_ACCOUNT",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "243",
        //   "y": "160",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "开票",
        //   "value": "INVOICE",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "293",
        //   "y": "160",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "前向解析",
        //   "value": "BEFORE_CONTRACT_ANALYSIS",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "147",
        //   "y": "220",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "采购",
        //   "value": "PURCHASE",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "245",
        //   "y": "285",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "后向合同",
        //   "value": "BACK_CONTRACT_FLOW",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "295",
        //   "y": "285",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "工程立项",
        //   "value": "PROJECT_APPROVAL",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "195",
        //   "y": "285",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "协议级立项",
        //   "value": "AGREEMENT_APPROVAL",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "194",
        //   "y": "220",
        //   "label": {
        //     "color": "red"
        //   },
        //   "symbolSize": [
        //     82,
        //     85
        //   ]
        // },
        // {
        //   "name": "后向解析",
        //   "value": "BACK_CONTRACT_ANALYSIS",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "345",
        //   "y": "285",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "采购报账",
        //   "value": "PURCHASE_LEASE",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "390",
        //   "y": "220",
        //   "label": {
        //     "color": "red"
        //   }
        // },
        // {
        //   "name": "省财辅报账",
        //   "value": "PROVINCE_CF_LEASE",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "390",
        //   "y": "350",
        //   "label": {
        //     "color": "red"
        //   },
        //   "symbolSize": [
        //     82,
        //     85
        //   ]
        // },
        // {
        //   "name": "集中财辅报账",
        //   "value": "MSS_CF_LEASE_FLOW",
        //   "symbol": 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        //   "x": "435",
        //   "y": "285",
        //   "label": {
        //     "color": "red"
        //   }
        // },

        // {
        //   "name": "辅助节点2",
        //   "x": 50,
        //   "y": 285,
        //   "symbolSize": 0,
        //   "system_name": null,
        //   "label": {
        //     "opacity": 0
        //   }
        // },
        // {
        //   "name": "辅助节点3",
        //   "x": 245,
        //   "y": 220,
        //   "symbolSize": 0,
        //   "system_name": null,
        //   "label": {
        //     "opacity": 0
        //   }
        // },
        // {
        //   "name": "辅助节点4",
        //   "x": 345,
        //   "y": 220,
        //   "symbolSize": 0,
        //   "system_name": null,
        //   "label": {
        //     "opacity": 0
        //   }
        // },
        // {
        //   "name": "辅助节点5",
        //   "x": 345,
        //   "y": 350,
        //   "symbolSize": 0,
        //   "system_name": null,
        //   "label": {
        //     "opacity": 0
        //   }
        // },
        // {
        //   "name": "辅助节点6",
        //   "x": 435,
        //   "y": 220,
        //   "symbolSize": 0,
        //   "system_name": null,
        //   "label": {
        //     "opacity": 0
        //   }
        // },
        // {
        //   "name": "辅助节点7",
        //   "x": 435,
        //   "y": 350,
        //   "symbolSize": 0,
        //   "system_name": null,
        //   "label": {
        //     "opacity": 0
        //   }
        // }
      ],
      linkList: [
        {
          "source": "魏淑芳",
          "target": "齐唯名",
          "symbolSize": [0, 10],
          "lineStyle": {
            "width": 1,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
        {
          "source": '魏淑芳',
          "target": "王七七",
          "symbolSize": [
            1,
            10
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
        {
          "source": '王一成',
          "target": "王二强",
          "symbolSize": [
            1,
            10
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          },
          "value": 20
        },
        {
          "source": 'wfl',
          "target": "魏淑芳",
          "symbolSize": [
            1,
            10
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
        {
          "source": "魏淑芳",
          "target": "王一成",
          "symbolSize": [
            1,
            10
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
        {
          "source": "魏淑芳",
          "target": "王三丽",
          "symbolSize": [
            1,
            10
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
        {
          "source": "王四美",
          "target": "辅助节点1",
          "symbolSize": [
            1,
            1
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
        {
          "source": "辅助节点1",
          "target": "wfl",
          "symbolSize": [
            1,
            10
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
        // {
        //   "source": "辅助节点1",
        //   "target": "wfl",
        //   "symbolSize": [
        //     1,
        //     10
        //   ],
        //   "lineStyle": {
        //     "width": 2,
        //     "curveness": 0,
        //     "color": "#5fb48d"
        //   }
        // },
        {
          "source": "wfl",
          "target": "王二强",
          "symbolSize": [
            1,
            10
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
        {
          "source": "wfl",
          "target": "王三丽",
          "symbolSize": [
            1,
            10
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
        {
          "source": "wfl",
          "target": "王四美",
          "symbolSize": [
            1,
            10
          ],
          "lineStyle": {
            "width": 2,
            "curveness": 0,
            "color": "#5fb48d"
          }
        },
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart)
      // 绘制图表
      myChart.setOption({
        scaleLimit: {
          // 所属组件的z分层，z值小的图形会被z值大的图形覆盖
          min: 0.7, // 最小的缩放值
          max: 1.2 // 最大的缩放值
        },
        // 标题
        title: {
          text: '测试',
          top: 'auto',
          // left: 30,
          textStyle: {
            // 文字颜色
            color: 'red',
            // 字体风格,'normal','italic','oblique'
            fontStyle: 'normal',
            // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: 'bold',
            // 字体系列
            fontFamily: 'sans-serif',
            // 字体大小
            fontSize: 15
          }
        },
        // 提示
        tooltip: {
          show: true,
          enterable: true,
          formatter: params => {
            return params.name
          }
        },
        nimationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: [70, 85],
            roam: false,
            label: {
              show: true,
              fontSize: 14,
              opacity: 1,
              formatter: params => {
                return params.name
              },
              color: '#fff',
              position: 'bottom',
              backgroundColor: 'black',
              fontWeight: 'bold',
              borderColor: 'black',
              borderType: 'solid',
              borderRadius: 10,
              padding: [8, 20]
            },
            // itemStyle: {
            //   normal: {
            //     color: '#edf4ff'
            //   }
            // },
            // symbol: 'roundRect',
            symbol: 'round',
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              show: true,
              fontSize: 14,
              position:'middle',
               padding:[10,0],
               fontWeight:'bold',
               textStyle: {
                  color: 'red'
                },
              formatter: param =>{
                  // console.log(param);
                if(param.dataIndex==3){
                  return '恩爱夫妻'
                }else{
                    return param.name
                }
                
              }
            },

            data: this.nodeList,
            links: this.linkList,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }]
      })
    },
  }
}
</script>
<style scoped lang='scss'>
</style>